<template>
  <view class="box">
    <view class="choose-tab">
      <view class="choose-tab-item" :class="chooseTab == 0 ? 'activeOne' : ''" data-choose="0" @tap="clickTab">
        报修单汇总
      </view>
      <view class="choose-tab-item" :class="chooseTab == 1 ? 'activeTwo' : ''" data-choose="1" @tap="clickTab">
        <!-- 设备号汇总 -->设备分类汇总
      </view>
      <view class="choose-tab-item" :class="chooseTab == 2 ? 'activeThree' : ''" data-choose="2" @tap="clickTab">
        报修员汇总
      </view>
      <view class="choose-tab-item" :class="chooseTab == 3 ? 'activeThree' : ''" data-choose="3" @tap="clickTab">
        维修员汇总
      </view>
    </view>

    <view class="content">
      <view class="example-body">
        <uni-datetime-picker v-model="range" type="daterange" @change="datechange()" />
      </view>
      <t-table border="2" border-color="##80a2ce" :is-check="false" @change="change">
        <t-tr font-size="11" color="##80a2ce" align="left">
          <t-th align="center" v-if="queryParams.queryStatus==0">报修单</t-th>
          <t-th align="center" v-if="queryParams.queryStatus==1">设备分类</t-th>
          <t-th align="center" v-if="queryParams.queryStatus==2">报修员昵称</t-th>
          <t-th align="center" v-if="queryParams.queryStatus==3">维修员昵称</t-th>
          <t-th align="center">待派发</t-th>
          <t-th align="center">维修中</t-th>
          <t-th align="center">已完成(待审核)</t-th>
          <t-th align="center">已完成(已拒绝)</t-th>
          <t-th align="center">已完成(已同意)</t-th>
        </t-tr>
        <t-tr font-size="12" color="##80a2ce" align="right" v-for="item in tableByCodeList" :key="item.id"
          v-if="tableList!=''">
          <t-th align="center" v-if="queryParams.queryStatus==0">{{ item.maintenanceCode }}</t-th>
          <t-th align="center" v-if="queryParams.queryStatus==1">{{ item.equipmentClassification }}</t-th>
          <t-th align="center" v-if="queryParams.queryStatus==2" style="word-break: break-all;
		  word-wrap: break-word">{{ item.user.nickName }}</t-th>
      <t-th align="center" v-if="queryParams.queryStatus==3" style="word-break: break-all;
      word-wrap: break-word">{{ item.user.nickName }}</t-th>
          <t-td align="center">{{ item.paifa }}</t-td>
          <t-td align="center">{{ item.weixiu }}</t-td>
          <t-td align="center">{{ item.shenhe }}</t-td>
          <t-td align="center">{{ item.jujue }}</t-td>
          <t-td align="center">{{ item.tongyi }}</t-td>
        </t-tr>
        <t-tr font-size="12" color="##80a2ce" align="right" v-if="tableByCodeList==''">
          <t-td align="center">暂无数据</t-td>
        </t-tr>
      </t-table>
      <view class="uni-pagination-box"><uni-pagination show-icon :page-size="queryParams.pageSize"
          :current="queryParams.pageNum" :total="total" @change="change" />
      </view>
    </view>
  </view>
</template>
<script>
  import {
    queryUserReportForms
  } from "@/api/system/task/task.js"
  import tTable from '../components/t-table/t-table.vue';
  import tTh from '../components/t-table/t-th.vue';
  import tTr from '../components/t-table/t-tr.vue';
  import tTd from '../components/t-table/t-td.vue';
  export default {
    components: {
      tTable,
      tTh,
      tTr,
      tTd
    },
    onLoad() {
      this.querystateLsit();
    },
    data() {
      return {
        userId: null,
        warrantyDate: null,
        range: [],
        tableByCodeList: [],
        chooseTab: 0,
        total: 0,
        queryParams: {
          pageNum: 1,
          pageSize: 5,
          warrantyPersonId: null,
          maintainerId: null,
          startDate: null,
          endDate: null,
          queryStatus: 0
        }
      }
    },
    watch: {
      range(newval) {
        if (this.range.length > 0) {
          this.querystateLsit()
        }
      },
    },
    onLoad(option) {
      this.userId = option.userId
      this.querystateLsit()
    },
    methods: {
      clickTab: function(e) { //点击切换
        if (!this.show) {
          this.chooseTab = e.target.dataset.choose;
          //重置关键数据
          this.empty()
          if (this.chooseTab == 0) {
            this.queryParams.queryStatus = 0
            this.querystateLsit()
          } else if (this.chooseTab == 1) {
            // this.queryParams.queryStatus = 1
            // this.querystateLsit()
          } else if(this.chooseTab == 2) {
            this.queryParams.queryStatus = 2
            this.querystateLsit()
          }else{
            this.queryParams.queryStatus = 3
            this.querystateLsit()
          }
        }
      },
      //根据工单编号查询工单状态列表
      querystateLsit() {
        this.queryParams.warrantyPersonId = (this.userId == 1 || this.$auth.hasRole("repairman")) ? "" : this.userId
        this.queryParams.maintainerId = (this.userId != 1 && this.$auth.hasRole("repairman")) ? this.userId : ""
        this.queryParams.startDate = this.range[0]
        this.queryParams.endDate = this.range[1]
        queryUserReportForms(this.queryParams).then(response => {
          if (response.code == 200) {
            this.tableByCodeList = response.rows
            this.total = response.total
          }
        })
      },
      // 分页触发
      change(e) {
        this.queryParams.pageNum = e.current
        this.querystateLsit()
      },
      //判断日期是选择
      datechange(e) {
        if (e.length == 0) {
          this.range = []
          this.querystateLsit()
        }
      },
      empty() {
        //重置关键数据
        this.range = []
        this.tableByCodeList = []
        this.queryParams.pageNum = 1
      },
    }
  }
</script>

<style lang="scss">
  .choose-tab {
    background-color: #ffffff;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 999;
    height: 90rpx;
    line-height: 90rpx;
    text-align: center;
    border-top: 1rpx solid #dfdfdf;
  }

  .choose-tab-item {
    font-weight: bold;
    width: 33%;
  }

  .activeOne {
    border-bottom: 4rpx solid #07c160;
  }

  .activeTwo {
    border-bottom: 4rpx solid #07c160;
  }

  .activeThree {
    border-bottom: 4rpx solid #07c160;
  }

  .content {
    margin: 20rpx;
    border-radius: 10rpx;
    position: relative;
    background-color: white;
  }
</style>